<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>碰壁反弹</title>
    <style>
        #outer {
            width: 800px;
            height: 800px;
            background-color: #ccc;
            position: relative;
            margin: 0 auto;
            border: 1px solid #000;
        }

        #box {
            width: 50px;
            height: 50px;
            background-color: indianred;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        #box2 {
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            left: 60px;
            top: 60px;
        }
    </style>
</head>

<body>
    <div id="outer">
        <div id="box2">
        </div>
        <div id="box">
        </div>
    </div>
    <script>
        var oOuter = document.getElementById("outer");
        var oBox = document.getElementById("box");
        var box2 = document.getElementById("box2");

        var timer = null;
        // 定义一个变量 保存x轴的位置
        var leftPoint = 0, topPoint = 0;
        //定义一个开关，如果目前向右走  那么值为true
        var isRight = true, isBottom = true;
        var speed = 5
        
        
        var downele = function () {
            box2.style.top = ++box2.offsetTop+"px"
            if ((box2.offsetTop+oBox.clientWidth)>=800) {
                box2.remove()
                // alert("downele--失败了")
                clearInterval(downid)
            }
        }
        // 检查失败
        // downele()
        let downid = setInterval(downele,1000)

        var end = function () {
            if (Math.abs(box2.offsetTop-oBox.offsetTop)<=50&&Math.abs(box2.offsetLeft-oBox.offsetLeft)<=50) {
                oBox.style.left = "0px"
                oBox.style.top = "0px"
                alert("游戏结束了")
                clearInterval(endid)
            }
            // console.log(111)
        }

        var endid =  setInterval(end,100)

        

        window.onkeydown = function (event) {
            // console.log(event.keyCode)
            // console.log("元素-->"+box2.offsetTop)
            // 向右
            if (event.keyCode == 39) {
                leftPoint += speed
                oBox.style.left = leftPoint + 'px'
                if (oOuter.clientWidth <= (oBox.offsetLeft + oBox.clientWidth)) {
                    alert("碰墙了")
                    leftPoint = 0
                    oBox.style.left = leftPoint + 'px'
                }
            }
            if (event.keyCode == 40) {
                topPoint += speed
                oBox.style.top = topPoint + 'px'
                if (oOuter.clientHeight <= (oBox.offsetTop + oBox.clientHeight)) {
                    alert("碰墙了")
                    topPoint = 0
                    oBox.style.top = topPoint + 'px'
                }
            }
            if (event.keyCode == 37) {
                leftPoint -= speed
                oBox.style.left = leftPoint + 'px'
                if (oBox.offsetLeft <= 0) {
                    alert("碰墙了")
                    leftPoint = 0
                    oBox.style.left = leftPoint + 'px'
                }
            }
            if (event.keyCode == 38) {
                topPoint -= speed
                if (oBox.offsetTop <= 0) {
                    alert("碰墙了")
                    topPoint = 0
                }
                oBox.style.top = topPoint + 'px'
            }
        }
    </script>
</body>

</html>